﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Template</title>
    <script type="text/javascript" src="../lib/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="../lib/dumpobj.js"></script>
    <script type="text/javascript" src="../lib/jQXB.1.1.js"></script>
</head>
<body>
    <h1>Template Events example</h1>
    <h2>Change data</h2>
    <table>
        <thead>
            <tr>
                <th>Prefix</th>
                <th>Number</th>
            </tr>
        </thead>
        <tbody jqxb-templatecontainer="addressTemplate" jqxb-datasource="mydataDetails">
            <tr jqxb-template="addressTemplate" jqxb-templateitemidprfx="addressrow" style="display: none;">
                <td><input type="text"  jqxb-itemdatamember="prefix" /></td>
                <td><input type="text"  jqxb-itemdatamember="number" /></td>
                <td><input type="text"  class="rowsummary" /></td>
                <td><a href="#" class="onSelect">Click To See Data</a></td>
             </tr>
        </tbody>
    </table>
    <div >
        <textarea jqxb-datasource="mydataDump" jqxb-datamember="object" cols="100" rows="20" ></textarea>
    </div>

<script type="text/javascript">
    var Customer = { 'Name': 'Anthony',
        'Surname': 'Murray',
        'Address': { 'Street': 'Carnaby Street', 'ZipCode': 'YTSCH', 'Phones': [{ 'prefix': 010, 'number': 23094895 }, { 'prefix': 0185, 'number': 2930940 }, { 'prefix': 03485, 'number': 3234567}] },
        'MonthlyAmount': [13498, 23456, 12345, 12345, 38728, 0, 34231, 39748.95, 34534, 2134, 567, 666, 345]
    };
    var dataDump = new Object();
    dataDump.object = dumpObj(Customer, 'Customer', "- ", 1);
    jQXB.setDataSource('mydataDump', dataDump).doBind('mydataDump');
    // Common jQuery entry point
    jQuery(document).ready(function () {
        // Initialize the System
        jQXB.initialize();
        // Attach template Event Handling, it should be declared before binding 
        jQXB.addOnTemplateItemBoundhnd(function (dataSorceName, templateName, occurrency, dataItem, jQrytemplateItem) {
            switch (templateName) {
                case "addressTemplate": // filter only event databound from a specifica template
                    var jQryElem = jQrytemplateItem.find('.rowsummary');
                    var jQryBtn = jQrytemplateItem.find('.onSelect');
                    jQryElem.val(' the row  ' + occurrency + ' has been created in template \'' + templateName + '\', values : ' + dataItem.prefix + ' and ' + dataItem.number);
                    // prevent events fires twice in case of re-binding
                    jQryBtn.unbind();
                    jQryBtn.bind('click', function () {
                                alert('Row ' + occurrency + ' selected , calling ' + dataItem.prefix + '-' + dataItem.number); 
                            });
                    break;
            }
        });

        // Create a new DataSource for template ( data are shared between the two datasource )
        jQXB.setDataSource('mydataDetails', Customer.Address.Phones).doBind('mydataDetails');
        // Attach Events for display data changes
        jQXB.addOnAfterUpdatehnd(function (datasourceName) {
            switch (datasourceName) {
                case "mydataDetails":
                    var dataDump = new Object();
                    dataDump.object = dumpObj(Customer, 'Customer', "- ", 1);
                    jQXB.setDataSource('mydataDump', dataDump).doBind('mydataDump');
                    break;
            }
        });

    });

</script>

</body>
</html>
